<template>
	<Table ref="tableRef" :url="URL_GETALARMMESSAGEPAGE" :columns="data.columns" :query="data.query"
		:toolbar="data.toolbar"></Table>
</template>

<script lang="ts" setup name="alarmNotificationRecordList">
	import Table from '@/components/table/index.vue';
	import { queryDicByParent } from '@/service/apis/api';
	import { exportFile } from '@/utils/utils';
	import {
		URL_GETALARMMESSAGEPAGE,
		EXPORT_ALARMMESSAGE,
	} from '@/service/apis/alarm';
	import moment from 'moment';

	const router = useRouter();

	const tableRef = ref();

	const data = reactive({
		pickDate: null as any,
		columns: [
			{
				prop: 'alarmSetType',
				label: '告警类型',
				dic: [] as any,
				type: Number,
			},
			{
				prop: 'alarmTermType',
				label: '告警原因',
			},
			{
				prop: 'connectorCode',
				label: '终端编码',
			},
			{
				prop: 'connectorName',
				label: '终端名称',
			},
			{
				prop: 'stationName',
				label: '归属电站',
			},
			{
				prop: 'userAccount',
				label: '用户账号',
			},
			{
				prop: 'alarmTime',
				label: '告警时间',
			},
			{
				prop: 'notifyTime',
				label: '通知时间',
			},
			{
				prop: 'notifyNumbers',
				label: '通知号码',
			},
		],
		query: [
			{
				label: '通知时间',
				prop: 'notifyData',
				comName: 'date',
				keys: ['notifyStartTime', 'notifyEndTime'],
				props: {
					type: 'daterange',
				},
			},
			{
				label: '告警类型',
				prop: 'alarmSetType',
				comName: 'select',
				props: {
					placeholder: '请选择告警类型',
					options: [] as any,
				},
			},
			{
				label: '告警时间',
				prop: 'alarmData',
				comName: 'date',
				keys: ['alarmStartTime', 'alarmEndTime'],
				props: {
					type: 'daterange',
					calendarChange: (pick : any) => {
						let hasSelectDate = pick !== null && pick.length > 0;
						data.pickDate = hasSelectDate ? pick[0] : null;
					},
					change: (time : any) => {
						if (!time) {
							data.pickDate = null;
						}
					},
					disabledDate: (time : any) : any => {
						if (data.pickDate) {
							const checkTime = data.pickDate.getTime();
							const startTime = checkTime - 62 * 86400 * 1000; // 前面限制62天
							const endTime = checkTime + 62 * 86400 * 1000; // 后面限制62天
							return time.getTime() > endTime || time.getTime() < startTime;
						} else {
							return false;
						}
					},
				},
			},
		],
		toolbar: [
			{
				label: '导出',
				permission: 'alarmNotificationRecordList.export',
				icon: 'icon-export',
				type: 'primary',
				plain: true,
				handle: (row : any) => {
					const startData = tableRef?.value.getForm().alarmStartTime;
					const startData1 = tableRef?.value.getForm().alarmEndTime;
					const day = moment(startData1).diff(moment(startData), 'day');
					if ((startData || day > 0) && day < 63) {
						exportFile(
							EXPORT_ALARMMESSAGE,
							'告警通知记录',
							tableRef.value?.getForm()
						);
					} else {
						ElMessageBox.alert(
							'单次导出最多支持导出周期为2个月的数据，请按时间筛选导出对象后再导出。',
							'提示',
							{
								confirmButtonText: '确认',
								type: 'warning',
							}
						);
					}
				},
				// handle: (row: any) => {
				//   exportFile(
				//     EXPORT_ALARMMESSAGE,
				//     '告警通知记录',
				//     tableRef.value?.getForm()
				//   );
				// },
			},
		],
	});

	queryDicByParent({
		listDtos: ['AlarmSettingType', 'AlarmTermType'],
	}).then((res : any) => {
		if (res) {
			data.query[1].props.options = [...res.AlarmSettingType];
			data.columns[0].dic = [...res.AlarmSettingType];
		}
	});
</script>